import {h} from 'vue'
import {DataTableColumns, NButton} from 'naive-ui'
import {NImage} from "naive-ui/es/image";
import type {OptionValue} from "naive-ui/es/transfer/src/interface";

// 点击类型枚举
export enum ClickType {
  UPDATE = 'update',
  ADD = 'add',
  DELETE = 'delete',
  UPDATE_PASSWORD = 'update_password',
  NONE = 'no'
}

export const roles: Role.BaseInfo[] = [{
  roleId: 0,
  roleName: '',
  description: '',
  createdAt: '',
  updatedAt: '',
  roleCode: '',
  status: 1,
  home: '',
}]

// 默认的菜单模型
export const DEFAULT_MENU_MODEL: User.BaseInfo = {
  userId: 0,
  username: '',
  email: '',
  name: '',
  createdAt: '',
  updatedAt: '',
  status: '',
  accountLockedType: '',
  enable: '',
  lastLogin: '',
  UserGender: '',
  phone: '',
  wechat: '',
  avatar: '',
}

// 表单规则
export const useFormRules = () => {
  return {
    username: {
      required: true,
      message: '账号',
      trigger: 'blur',

    },
    name: {
      required: true,
      message: '请输入用户名称',
      trigger: 'blur'
    },
    email: {
      required: true,
      message: '请输入邮箱',
      trigger: ['blur']
    },
    phone: {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    },
    userGender: {
      required: true,
      message: '请选择性别',
      trigger: ['blur', 'change']
    },
    password: {
      required: true,
      message: '请输入密码',
      trigger: ['blur', 'change']
    },

  }
}

// 表格列配置
export const useColumns = (
  handleClick: (type: ClickType, row: User.BaseInfo) => void
): DataTableColumns => { // 明确返回类型
  return [

    {
      title: '账号',
      resizable: true,
      key: 'username',
      align: 'center',
      ellipsis: {
        tooltip: true
      }
    },
    {
      title: '头像',
      resizable: true,
      align: 'center',
      key: 'avatar',
      render(row: User.BaseInfo) {
        return h(
          NImage,
          {
            width: 50,
            src: row.avatar
          }
        )
      }
    },
    {
      title: '用户名称',
      resizable: true,
      key: 'name',
      align: 'center'
    },
    {
      title: '邮箱',
      resizable: true,
      align: 'center',
      key: 'email',
    },
    {
      title: '创建时间',
      resizable: true,
      align: 'center',
      key: 'createdAt',
    },
    {
      title: '修改时间',
      resizable: true,
      align: 'center',
      key: 'updatedAt',
    },
    {
      title: '操作',
      key: 'actions',
      align: 'center',
      render(row: Role.BaseInfo) {
        return [
          h(
            NButton,
            {
              size: 'small',
              onClick: () => handleClick(ClickType.UPDATE, row)
            },
            {default: () => '修改'}
          ),
          h(
            NButton,
            {
              size: 'small',
              onClick: () => handleClick(ClickType.DELETE, row)
            },
            {default: () => '删除'}
          )
        ]
      }
    }
  ]
}

// 右键菜单选项
export const useContextMenuOptions = (handleClick: (type: ClickType, row: User.BaseInfo) => void) => {
  return [
    {
      label: '新增',
      key: ClickType.ADD,
      onClick: (row: Role.BaseInfo) => {
        handleClick(ClickType.ADD, row)
      }
    },
    {
      label: '编辑',
      key: ClickType.UPDATE,
      onClick: (row: Role.BaseInfo) => {
        handleClick(ClickType.UPDATE, row)
      }
    },
    {
      label: '强制修改密码',
      key: ClickType.UPDATE_PASSWORD,
      onClick: (row: Role.BaseInfo) => {
        handleClick(ClickType.UPDATE_PASSWORD, row)
      }
    },

  ]
}

// Modal样式配置
export const modalStyle = {
  width: '600px'
}
